import { ArrowRightOutlined } from "@ant-design/icons"
import { StoryObj } from "@storybook/react"
import { Card, Divider, Flex, Typography } from "antd"

import { NormalInput } from "@/components/common"

const Template = (args: { labelId: string; name: string; maxLength: number }) => {
	const { Title, Paragraph, Text } = Typography
	return (
		<Typography>
			<Title level={2}>普通输入框-textarea</Title>
			<Paragraph>
				可复用表单textarea输入框，如缺省示例&quot;<Text italic>备注</Text>&quot;, 必须在business组件中封装后导出使用,
				示例封装关键代码如下：
				<Divider />
				<Flex gap={8} align="center">
					<Text
						code
					>{`<NormalInput type="textarea" showCount maxLength={${args.maxLength}} labelId="${args.labelId}" name="${args.name}" rules={[{ required: true }]} />`}</Text>
					<ArrowRightOutlined />
					<Card>
						<NormalInput type="textarea" rules={[{ required: true }]} showCount {...args} />
					</Card>
				</Flex>
			</Paragraph>
		</Typography>
	)
}

export default {
	title: "普通输入框类型-textarea",
	component: Template
}

type Story = StoryObj<typeof Template>

export const RemarkInput: Story = {
	args: {
		labelId: "label.remark",
		name: "remark",
		maxLength: 500
	}
}
